import React, { PureComponent } from 'react';
import { formatMessage, setLocale, getLocale } from 'umi/locale';
import { Menu, Icon, Dropdown } from 'antd';
import classNames from 'classnames';
import { SystemInfo } from '../../utils/constant';
import styles from './index.less';

export default class SelectLang extends PureComponent {
  changLang = ({ key }) => {
    setLocale(key);
  };

  render() {
    const { className } = this.props;
    const selectedLang = getLocale();
    const langMenu = (
      <Menu className={styles.menu} selectedKeys={[selectedLang]} onClick={this.changLang}>
        {SystemInfo.languages.map(language => (
          <Menu.Item key={language.key}>
            <span role="img" aria-label={language.label}>
              {language.lang}
            </span>{' '}
            {language.label}
          </Menu.Item>
        ))}
      </Menu>
    );
    return (
      <Dropdown overlay={langMenu} placement="bottomRight">
        <Icon type="global" className={classNames(styles.dropDown, className)} title={formatMessage({ id: 'navBar.lang' })} />
      </Dropdown>
    );
  }
}
